<template>
    <div class="property" :key="new Date().getTime()">
        <functional title="属性编辑" class="propertyContents" icon="fa fa-edit" type="property" options="left" :isFooter="true" :class="widget.coverage ? 'propertyToRight' : ''">
            <el-collapse v-model="activeNames">
                <el-collapse-item v-for="classfly in pageData" :key="classfly.id" :title="`- ${classfly.title}`" :name="classfly.id">
                    <ul class="editorformTable">
                        <!-- <li
                            class="editorformItem"
                            v-for="(item, index) in classfly.item"
                            :key="index"
                            v-show="
                                item.relyOn || item.skipLevel
                                    ? item.dataLayer == 'materialOptions'
                                        ? item.skipLevel
                                            ? options.style[item.skipLevelName]
                                            : item.property
                                            ? item.property == options.style.materialType
                                            : options.style.materialOptions[item.relyOn]
                                        : item.dataLayer == 'label'
                                        ? options.style.label[item.volumeRelyOn] || options.style.label[item.areaRelyOn] || options.style.label[item.asRelyOn] || options.style.label[item.relyOn]
                                        : options.style[item.relyOn]
                                    : true
                            "
                        > -->
                        <li class="editorformItem" v-for="(item, index) in classfly.item" :key="index" v-show="itemIsShows(item)">
                            <div class="editorformItemName">{{ item.name }}</div>
                            <div class="editorformItemFunc">
                                <formItem :graphic="graphic" :data="item" :key="widget.editFormKey" />
                            </div>
                        </li>
                    </ul>
                </el-collapse-item>

                <!-- 通用,顶部标绘信息 -->

                <!-- <graphicInfo :graphic="graphic" id="1"></graphicInfo> -->
                <!-- 文字信息 -->
                <!-- <graphicText :graphic="graphic" id="3"></graphicText> -->
                <!-- 底部显示的标绘数据 -->
                <!-- <lastmsg :graphic="graphic" id="4"></lastmsg> -->
            </el-collapse>
            <template #footer>
                <div class="submitBtn">
                    <el-button color="#20a0ff" :dark="true" plain size="small" @click="saveEditorDraw(graphic)">保存</el-button>
                    <!-- <el-button color="#20a0ff" :dark="true" plain size="small">添加</el-button> -->
                </div>
            </template>
        </functional>
    </div>
</template>
<script setup lang="ts">
import { ref, reactive, computed, watch } from "vue";
import { store, graphicLayer, widget, mars3d } from "@/utils/global";
import { saveEditorDraw } from "@/utils/draw/saveEditorDrawData";
import propertyEditor from "@/config/property.config";
import formItem from "./element/components/form.vue";
// 标绘样式
// import graphicInfo from "@/views/editor/element/info.vue";
// 文字信息
// import graphicText from "@/views/editor/element/text.vue";
// 底部显示的标绘数据
// import lastmsg from "@/views/editor/element/lastmsg.vue";

/**
 * 获取到当前标绘数据参数
 */
let graphic = reactive(graphicLayer.getGraphicById(store.rightClickData.id));
const options = reactive(graphic.options);
// console.log(options);
// if (!options.icon.includes("http")) {
//     options.icon = `${import.meta.env.VITE_BASE_XYZ}${options.icon}`;
// }
const itemIsShows = (item: any) => {
    let show = undefined;
    if (item.relyOn) {
        // 如果有依赖的属性
        if (item.dataLayer == "materialOptions") {
            show = options.style.materialOptions[item.relyOn];
            if (item.property) {
                show = item.property == options.style.materialType;
            }
            if (item.skipLevel) {
                // 如果有跳过层级
                if (item.property) {
                    show = options.style[item.skipLevelName] && item.property == options.style.materialType;
                } else {
                    show = options.style[item.skipLevelName];
                }
            }
        } else if (item.dataLayer == "label") {
            let relyOnArrey = item.relyOn.split(",");
            // console.log(relyOnArrey);
            relyOnArrey.forEach((v: any) => {
                if (options.style.label[v]) {
                    show = true;
                }
            });
        } else if (item.dataLayer == "style") {
            show = options.style[item.relyOn];
        }
    } else {
        show = true;
    }
    return show;
};
/**
 * 标绘类型
 */
// const plottingType: any = ref(graphic.options.plottingType);
/**
 * 获取标绘编辑属性列表
 */
const pageData: any = propertyEditor(graphic);
let itemShowData: any = ref(undefined);
const setItemShow = () => {
    pageData.forEach((item: any) => {
        item.item.forEach((v: any) => {
            if (v.relyOn) {
                if (v.dataLayer == "materialOptions") {
                    itemShowData.value = options.style.materialOptions;
                } else if (v.dataLayer == "style") {
                    itemShowData.value = options.style;
                }
            }
        });
    });
};
setItemShow();
// 默认打开所有选项
const activeNames: any = ref(["1", "2", "3", "4"]);
/**
 * 监听标绘修改
 */
// graphicLayer
//     .on(mars3d.EventType.editMovePoint, (e: any) => {
//         /**
//          * 编辑修改了点的位置
//          */
//         console.log("编辑修改了点的位置123");
//         widget.editFormKey = new Date().getTime();
//     })
//     .on(mars3d.EventType.editRemovePoint, (e: any) => {
//         /**
//          * 编辑删除点事件
//          */
//         console.log("编辑删除点事件123");
//         widget.editFormKey = new Date().getTime();
//     });
</script>
<style scoped lang="scss">
.propertyContents {
    transition: all 0.2s;
}
.propertyToRight {
    left: 320px;
}
</style>
